
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>态势图上传下载</title>

    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
            left: 20%;
            width: 79.8%;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
        #filetree {
            background: #ffffff;
            position: absolute;
            width: 19.8%;
            height:510px;
            border:1px solid #3473b7;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src="js/jquery.js"></script>
    <script src="js/fileupLoad.js"></script>
    <script src="../libs/SuperMap.Include.js"></script>
    <script src="js/plottingPanel/PlottingPanel.Include.js"></script>
    <script type="text/javascript">
        var map, layer, drawFeature,treePanel, plottingLayer,plottingEdit, sitManager, plotting;
		var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
        var mapurl = host + "/iserver/services/map-china400/rest/maps/China_4326";
        var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
		
        function init() {
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {transparent: true, cacheEnabled: true},{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});

            plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
            plottingLayer.style = {
                fillColor: "#66cccc",
                fillOpacity: 0.4,
                strokeColor: "#66cccc",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius:6
            };
        }
        function addLayer() {
            map.addLayers([layer, plottingLayer]);
            map.setCenter(new SuperMap.LonLat(104, 35), 3);

            plotting = SuperMap.Plotting.getInstance(map, serverUrl);
            treePanel = new SuperMap.Plotting.TreePanel("filetree");
            treePanel.events.on({"clickTreeNode": clickTreeNode});
            sitManager = plotting.getSitDataManager();
            sitManager.events.on({"getSMLInfosCompleted": getSMLInfosSuccess,
                "getSMLInfosFailed": getSMLInfosFail,
                "deleteSmlFileCompleted": deleteSmlFileSuccess,
                "deleteSmlFileFail": deleteSmlFileFail});
            getSMLInfos();
            fileFilter();
        }

        function getSMLInfos(){
            sitManager.getSMLInfos(0, 10);
        }

        function getSMLInfosSuccess(result){
            treePanel.initializeTree(result);
        }

        function getSMLInfosFail(result) {
            console.log(result);
        }

        function clickTreeNode() {
            var result = sitManager.downloadSmlFileURL(this.clickSmlFileName);
            document.getElementById("downloadUrl").value = serverUrl + result;

            document.getElementById("smlFileName").value = this.clickSmlFileName;

            sitManager.openSmlFileOnServer(this.clickSmlFileName);
        }

        function uploadSmlFile( ){
           function sucess(){
               getSMLInfos();
            }

            function fail(){
                console.log("todo something if faied");
            }

            sitManager.uploadSmlFile('smlFile', sucess, fail);
        }
        function downloadSmlFileOnServer(){
            window.open(document.getElementById("downloadUrl").value);
        }

        function deleteSmlFileOnServer(){
            var smlFileName = document.getElementById("smlFileName").value;
            sitManager.deleteSmlFileOnServer(smlFileName);
        }

        function deleteSmlFileSuccess(){
            document.getElementById("downloadUrl").value = null;
            document.getElementById("smlFileName").value = null;
            var allLayers = map.layers;
            for(var j = 0; j < allLayers.length; j++) {
                if(allLayers[j].isBaseLayer === true){
                    continue;
                }

                allLayers[j].removeAllFeatures();
                map.removeLayer(allLayers[j],false);
            }
            getSMLInfos();
        }

        function deleteSmlFileFail(){

        }

        function fileFilter(){
            var file = document.getElementById('smlFile');
            file.setAttribute("accept",".sml");

        }

        document.oncontextmenu = function(evt){
            return false;
        }
    </script>

</head>
<body onload="init()">
<div id="toolbar">
    <!--<input id ="111" type="button" class="btn" value="获取态势图列表 "onclick="getlist()"  />-->
    <input type="file" style='width:150px;' id = "smlFile" name="smlFile" > </input>
    <input type="button" class="btn" value="上传" onclick="uploadSmlFile()"   />
    <span>态势图文件URL：</span>
    <input type="text" style='width:100px;' id = "downloadUrl" name="downloadUrl" value = ""> </input>
    <input type="button" class="btn" value="下载" onclick="downloadSmlFileOnServer()" />
    <span>文件名称：</span>
    <input type="text" style='width:100px;' id = "smlFileName" name="smlFileName" value = ""> </input>
    <input type="button" class="btn" value="删除" onclick="deleteSmlFileOnServer()" />
</div>

<div id="filetree" title="态势图文件列表"></div>
<div id="map"></div>
</body>
</html>
